<template>
    <div class="tuanbox">
        <div class="couter">
            <div class="left">
                <el-col :span="24">
                    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                        default-openeds="1">
                        <el-sub-menu index="1">
                            <template #title>
                                <img src="@/assets/queen.png" alt="" class="mmm">
                                <span style="color: red;">党纪警示钟 </span>
                            </template>
                            <div class="itemmm" v-for="(item, index) in lbList " :key="index" @click="active(item.id)"
                                :class="acti == item.id ? 'activeitem' : ''">
                                {{ item.name }}
                            </div>
                        </el-sub-menu>
                    </el-menu>
                </el-col>
            </div>
            <div class="right">
                <div class="block_box">
                    <div v-for="(item, index) in tabhuan" :key="index" @click="detailtan(item)" class="nnnnn">
                        <div style="display:flex; justify-content: space-between;margin-top: 10px;cursor: pointer;"
                            @click="diaoti(item.id)">
                            <h3 class="bkuan">{{ item.title }}</h3>
                            <div>{{ item.create_time }}</div>
                        </div>
                        <div v-if="ab == item.id">
                            <p v-html="item.content" class="comtt"></p>
                            <div class="block_image">
                                <div v-for="(ite, ind) in item.images" :key="ind" class="fdsss" @click="yltp(ite)">
                                    <img :src="ite" alt="">
                                </div>
                                <div v-for="(it, ins) in item.video" :key="ins" class="fdsss" @click="ylsp(it)">
                                    <video :src="it" controls loop></video>
                                </div>
                                <div class="cler"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="con_bom" v-if="!kong">
                    <div class="cc">共{{ total }}条</div>
                    <el-pagination v-model:page-size="pageSize" background layout="prev, pager, next" :total="total"
                        @next-click="nextclick" @prev-click="prevclick" @change="change1" />
                </div>
                <div class="rq" v-show="kong">
                    <img src="@/image/容器.svg" alt="" />
                    <div>暂无信息</div>
                </div>
            </div>
        </div>
    </div>
    <div class="ylzhe" v-show="flimg" @click="flimg = false">
        <div class="ylzhao">
            <img :src="imageyl" alt="">
        </div>
    </div>
    <div class="ylzhe" v-show="flred" @click="flred = false">
        <div class="ylzhao">
            <video :src="redoyl" controls loop></video>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { bell_cate, bell, bell_read } from '@/api/team'
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
import { fa } from 'element-plus/es/locale';
import { ref } from 'vue';
import { useRouter } from 'vue-router'
const isExpanded = ref(false)

let Router = useRouter()
let lbList = ref()
const release = async () => {
    await bell_cate().then(res => {
        lbList.value = res.data.data
        console.log(res.data.data, 'lb')
    })
    await bell(data.value).then(res => {
        console.log(res.data.data.data, 'bell')
        tabhuan.value = res.data.data.data
        total.value = res.data.data.total
    })
    if (tabhuan.value == !{}) {
        kong.value = true
    } else {
        kong.value = false
    }
}
// console.log(lbList.value, 'ceshi')
release()

let tabhuan = ref()
let kong = ref(true)
let data: any = ref({
    page: 1,
    page_size: 18,
    cid: 1,
    status: 0
})
let acti = ref(1)
const active = async (item: any) => {
    ab.value = null
    acti.value = item
    data.value.cid = item
    await bell(data.value).then(res => {
        console.log(res.data.data.data, 'bell')
        tabhuan.value = res.data.data.data
        total.value = res.data.data.total
    })
    if (tabhuan.value == !{}) {
        kong.value = true
    } else {
        kong.value = false
    }
}
let kuang = ref(false)
let detailTan = ref({
    title: '',
    content: '',
    create_time: '',
    images: [],
    video: []
})
const detailtan = async (item: any) => {
    console.log(item, 'item')
    detailTan.value = item
    kuang.value = true
    let aa = item.id
    let data: any = {
        id: aa
    }
    await bell_read(data).then(res => {
        console.log(res, 'yd')
    })
}
const total = ref(0)
const pageSize = ref(18)
const nextclick = async () => {
    data.value.page++
    release()
}
const prevclick = async () => {
    data.value.page--
    release()
}
const change1 = async (e: any) => {
    data.value.page = e
    release()
}
let ab = ref(null)
const diaoti = (index: any) => {
    if (ab.value === index) {
        ab.value = null; // 点击已展开的内容时收起
    } else {
        ab.value = index; // 点击未展开的内容时展开
    }
    release()
}
let imageyl = ref()
let redoyl = ref()
let flimg = ref(false)
let flred = ref(false)
const yltp = (ite: any) => {
    console.log(ite, 'tu')
    imageyl.value = ite
    flimg.value = true
}
const ylsp = (ite: any) => {
    console.log(ite, 'tu')
    redoyl.value = ite
    flred.value = true
}
const guan = () => {
    console.log(1)
}
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
</script>

<style lang="scss" scoped>
.kong {
    width: 100%;
    height: 100%;
}

.el-menu-vertical-demo {
    span {
        color: red;
    }
}

// .tuanbox {
//     width: 100%;
//     background: #dcdadafb;
// }

.couter {
    width: 100%;
    display: flex;
    // height: 100vh;

    .left {
        width: 232px;
        // height: 100%;
        background: #fff;
        margin-left: 20px;
        margin-top: 15px;
    }

    .right {
        width: 78%;
        margin-left: 20px;
        margin-top: 15px;
        position: relative;
        height: 1200px;
        background: #fff;
    }


}

.left_rght {
    height: 180px;
    overflow: hidden;
    border-bottom: 2px #E5E5E5 solid;
    margin-top: 5px;

    dt {


        img {
            width: 160px;
            height: 130px;
            margin: 10px;
        }

        float: left;
    }

    dd {
        h3 {
            margin: 10px;
        }

        div {
            margin: 10px 15px;
        }

        p {
            margin: 10px;
            height: 50px;
            line-height: 25px;
            color: #999999;
            display: -webkit-box;
            /* 将元素视为块级盒子 */
            -webkit-line-clamp: 2;
            /* 控制显示的行数 */
            -webkit-box-orient: vertical;
            /* 设置文本排列方向为垂直 */
            overflow: hidden;
            /* 超出部分隐藏 */
            text-overflow: ellipsis;
            /* 超出部分用省略号表示 */
        }
    }
}

.block_box {
    width: 93%;
    margin-left: 1%;
    padding: 20px;
    height: 1050px;
    overflow: auto;

    .nnnnn {
        padding: 10px 0;
        border-bottom: 2px solid #E5E5E5;
    }

    p {
        line-height: 25px;
        margin-top: 10px;
        color: #999999;
    }

    .block_image {
        width: 700px;
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        // div {
        //     margin-left: 10px;
        // }
        img {
            width: 348px;
            height: 202px;
            // margin-right: 7px;
        }

        video {
            width: 340px;
            height: 202px;
            // margin-top: 10px;
            // margin-right: 7px;
        }
    }
}

.block_box::-webkit-scrollbar {
    display: none;
}

// .block_image>div {
//     margin-left: 0 !important;
// }

.fdsss {
    // float: left;
    cursor: pointer;
}

// .fdsss:nth-child(1) {
//     margin-left: 0 !important;
// }

.image_home {
    margin: 25px 0;

    img {
        width: 200px;
        height: 130px;
        margin-left: 10px;
    }
}

.butt {
    width: 96px;
    height: 40px;
    background: #E02020;
    color: #fff;
    border: none;
}

.biao {
    display: flex;
    justify-content: space-between;
    padding: 15px;
}

.nei_title {
    padding: 15px;
}

.con_bom {
    position: absolute;
    bottom: 50px;
    left: 50%;
    display: flex;
    transform: translateX(-50%);

    .cc {
        width: 100px;
        margin-top: 8px;
        text-align: center;
    }
}

.comtt {
    width: 100%;
    font-size: 14px;
    line-height: 45px;

}

.comtts {
    width: 100%;
    height: 50px;
    display: -webkit-box;
    /* 将元素视为块级盒子 */
    -webkit-line-clamp: 2;
    /* 控制显示的行数 */
    -webkit-box-orient: vertical;
    /* 设置文本排列方向为垂直 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 超出部分用省略号表示 */
    font-size: 12px;
    line-height: 45px
}

// @media (min-width: 2160px) {
//     .tuanbox {
//         width: 100%;
//         margin: 0 auto;
//         // background-color: #f0f0f0;
//     }
// }

// @media (max-width: 2159px) {
.tuanbox {
    width: 1080px;
    margin: 0 auto;
    // background-color: #f0f0f0;
}

// }

.cler {
    clear: both;
}

.bkuan {
    width: 550px;
    // background: olive;
}

.rq {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    // margin-top: 100px;
    width: 100%;
    height: 100%;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;

    img {
        width: 228px;
        height: 226px;
    }
}

.mmm {
    width: 18px;
    height: 18px;
    margin-right: 3px;
}

.itemmm {
    padding: 10px 0px 10px 40px;
    cursor: pointer;
}

.activeitem {
    background: #faa7a74b;
    color: #e02020;
}

.ylzhe {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: #0000007a;

    .ylzhao {
        width: 800px;
        height: 600px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -400px;
        margin-top: -300px;
        // background: #fff;

        img {
            width: 100%;
            height: 100%;
        }

        video {
            width: 100%;
            height: 100%;
        }
    }
}
</style>